<?php include('../include/head.php'); ?>
<body>
	<!-- 头部导航 -->
	<?php include('../include/header.php'); ?>
	<section class="main">
		<div class="content">
			<div class="container">
				<div class="movies-list-wrap mlw-topview">
					<div class="page-box">
                    	<nav>
                        	<ul class="pagination"></ul>
                        </nav>
                	</div>
					<div class="bd movies-list-container" id="movies-list-box"></div>
					<script id="movie-list" type="text/html">
						<ul class="ml-list">
						    <%for(var i=0; i<results.length; i++){%>
					         <li class="ml-item" data-movie-id="<%=results[i].id%>">
								<span class="mli-quality">HD</span><a class="ml-mask jt" data-movie-id="<%=results[i].id%>" title="<%=results[i].title%>" href="/dome/movie/movie?<%=results[i].id%>" target="_blank"><img class="lazy" data-original="https://image.tmdb.org/t/p/w185_and_h278_bestv2/<%=results[i].poster_path%>" src="/dome/movie/images/loading.gif" alt=""></a>
							</li>
							<%}%>
						</ul>
					</script>
					<div class="page-box">
                    	<nav>
                        	<ul class="pagination"></ul>
                        </nav>
                	</div>
                	
					<script>
						var $width  = $(window).width();
							$.jqPaginator('.pagination', {
							    totalPages   : 979,
							    totalCounts  : 19566,
							    visiblePages : 5,
							    currentPage  : 1,
							    onPageChange: function (num, type) {
									tmdb.call("/movie/top_rated", {"page":num},
										function(e){
											listhtml = template('movie-list', e);
											document.getElementById('movies-list-box').innerHTML = listhtml;
											$("img.lazy").lazyload({effect : "fadeIn"});
											if (!jQuery.browser.mobile) {
										        $('.jt').qtip({
										            content: {
										                text: function (event, api) {
															$getMovieDetail(api.elements.target.attr('data-movie-id'),function(html){
																api.set('content.text', html);
															})
															return 'Loading...'; // 设置默认文字
										                },
										                title: function (event, api) {
										                    return $(this).attr('title');
										                }
										            },
										            position: {
												        my: 'top left',
												        at: 'top right',
												        viewport: $("#movies-list-box"),
                										effect: false,
												        target: 'mouse',
												        adjust: {
										                    mouse: false
										                },
										                show: {
										                    effect: false
										                }
													},
													hide: {
										                fixed: true
										            },
										            style: {
										                classes: 'qtip-light qtip-bootstrap',
										                width: 320
										            }
										        });
										    }
										}
									);	
									$pagination($width);
							    }
							});

						$(function(){
							$(window).resize(function(){
								$width  = $(window).width();
								$pagination($width);
							});
						});
					</script>
				</div>
			</div>
		</div>
	</section>
	<?php include('../include/footer.php'); ?>
	<script>
		$(function(){

		    $("img.lazy").lazyload({
		    	effect : "fadeIn",
		    	skip_invisible : true
		    });

		});
	</script>
</body>
</html>